<template>
<div class="view-ExampleList2">
    <!-- 查询-查询条件 -->
    <div class="search-mod">
        <div class="s-item">
            <div class="s-item-l">
                <span>姓名</span>
            </div>
            <div class="s-item-r">
                <el-input v-model="condiData.name" placeholder="请输入"></el-input>
            </div>
        </div>
        <div class="s-item">
            <div class="s-item-l">
                <span>性别</span>
            </div>
            <div class="s-item-r">
                <el-select v-model="condiData.sex" style='width:100%;'>
                    <el-option v-for="data in sexList" :value="data.value" :key="data.value">{{ data.label }}</el-option>
                </el-select>
            </div>
        </div>
        <div class="s-item">
            <div class="s-item-l">
                <span>日期</span>
            </div>
            <div class="s-item-r">
                <el-date-picker type="date" :editable="false" placeholder="请选择" style='width:100%;' v-model="condiData.date"></el-date-picker>
            </div>
        </div>
        <div class="s-item-btns">
            <div class="s-btns-l">
                <el-button type='primary' @click='showAddListItemWin'>新增</el-button>
            </div>
            <div class="s-btns-r">
                <el-button type='primary' @click='searchList'>查询</el-button>
                <el-button type='primary' @click='resetSearch'>重置</el-button>
            </div>
        </div>
    </div>
    <!-- 查询-列表 -->
    <div class="list-mod">
        <el-table :data="listData">
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性别"
                width="180">
            </el-table-column>
            <el-table-column
                prop="date"
                label="时间">
            </el-table-column>
        </el-table>
    </div>
    <!-- 查询-分页 -->
    <el-pagination
        @size-change="listPageSizeChange"
        @current-change="listPageChange"
        :current-page="pageData.pageCurrent"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
    </el-pagination>
</div>
</template>

<script>
// @ is an alias to /src
import { post, get, request } from '@/common/service'

export default {
    name: 'ExampleList2',
    components: {
        
    },
    mounted () {
        this.searchList()
    },
    data () {
        return {
            // 下拉列表-性别
            sexList: [{
                value: '1',
                label: '男'
            },{
                value: '2',
                label: '女'
            }],
            // 查询-查询条件
            condiData: {
                name: '',
                sex: '',
                date: ''
            },
            // 查询-列表表头
            listDataHead: [
                {
                    title: '姓名',
                    key: 'name',
                    render: (h, params) => {
                        return h('div', [
                            h('a', {
                                props: {
                                    'class': 't-link',
                                    href: 'javascript:void(0)'
                                },
                                on: {
                                    click: () => {
                                        this.showDetailListItemWin(params.index)
                                    }
                                }
                            }, params.row.name)
                        ]);
                    }
                },
                {
                    title: '性别',
                    key: 'sexDesc'
                },
                {
                    title: '日期',
                    key: 'date'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    margin: '2px'
                                },
                                on: {
                                    click: () => {
                                        this.showEditListItemWin(params.index)
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                style: {
                                    margin: '2px'
                                },
                                on: {
                                    click: () => {
                                        this.delListItem(params.index)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            // 查询-列表数据
            listData: [],
            // 查询-分页数据
            pageData: {
                total: 0,
                pageSize: 10,
                pageCurrent: 1
            },

            // 查询-新增-弹窗开关
            addListItemWinFlag: false,
            // 查询-新增-表单数据
            addListItemFrom: {},
            // 查询-新增-校验规则
            addListItemRules: {
                name: [
                    { required: true, message: '必填项', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '必填项', trigger: 'blur' }
                ],
                date: [
                    { required: true, message: '必填项', trigger: 'blur' }
                ]
            },

            // 查询-修改-弹窗开关
            editListItemWinFlag: false,
            // 查询-修改-表单数据
            editListItemFrom: {},
            // 查询-修改-校验规则
            editListItemRules: {
                name: [
                    { required: true, message: '必填项', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '必填项', trigger: 'blur' }
                ],
                date: [
                    { required: true, message: '必填项', trigger: 'blur' }
                ]
            },

            // 查询-展示详情-弹窗开关
            detailListItemWinFlag: false,
            // 查询-展示详情-表单数据
            detailListItemForm: {},
        }
    },
    methods: {
        // 查询功能--查询
        searchList () {
            let condiData = this.condiData

            let data = {
                name: condiData.name,
                sex: condiData.sex,
                date: condiData.date,
                pageCurrent: this.pageData.pageCurrent,
                pageSize: this.pageData.pageSize
            }

            get(this.Api('queryExampleList'), data).then((res) => {
                this.listData = res.dataList;
                this.pageData.total = res.total;
            });
        },
        // 查询功能--重置
        resetSearch () {
            this.condiData = {
                name: '',
                sex: '',
                date: ''
            }
        },
        // 查询功能--页码变化
        listPageChange (index) {
            this.pageData.pageCurrent = index
            this.searchList()
        },
        // 查询功能--每页条数变化
        listPageSizeChange (index) {
            this.pageData.pageSize = index
            this.searchList()
        },

        // 查询功能--新增-打开弹窗
        showAddListItemWin () {
            this.addListItemWinFlag = true
        },
        // 查询功能--新增-关闭弹窗
        hideAddListItemWin () {
            this.addListItemWinFlag = false
        },
        // 查询功能--新增-确定发送
        addListItem () {
            this.$refs['addListItemFrom'].validate((valid) => {
                if (valid) {
                    this.$Modal.confirm({
                        title: '提示',
                        content: '是否确认新增',
                        onOk: () => {
                            let data = {
                                name: this.addListItemFrom.name,
                                sex: this.addListItemFrom.sex,
                                date: this.addListItemFrom.date
                            }
                            addExampleListItem(data).then((res) => {
                                this.$Message.success('新增成功')
                                this.hideAddListItemWin()
                                this.searchList()
                            }).catch((err) => {})
                        }
                    })
                }
            })
        },
        // 查询功能--新增-时间选择
        selectAddListItemTime (event) {
            this.addListItemFrom.date = event;
        },

        // 查询功能--修改-打开弹窗
        showEditListItemWin (index) {
            queryExampleListItem({
                primary: this.listData[index].primary
            }).then((res) => {
                this.editListItemWinFlag = true
                this.editListItemFrom = res
            }).catch((err) => {})
        },
        // 查询功能--修改-关闭弹窗
        hideEditListItemWin () {
            this.editListItemWinFlag = false
        },
        // 查询功能--修改-确定发送
        editListItem () {
            this.$refs['editListItemFrom'].validate((valid) => {
                if (valid) {
                    this.$Modal.confirm({
                        title: '提示',
                        content: '是否确认修改',
                        onOk: () => {
                            editExampleListItem(this.editListItemFrom).then((res) => {
                                this.$Message.success('修改成功')
                                this.hideEditListItemWin()
                                this.searchList()
                            }).catch((err) => {})
                        }
                    })
                }
            })
        },
        // 查询功能--修改-时间选择
        selectEditListItemTime (event) {
            this.editListItemFrom.date = event;
        },

        // 查询功能--删除
        delListItem (index) {
            this.$Modal.confirm({
                title: '提示',
                content: '是否确认删除该选项',
                onOk: () => {
                    delExampleListItem({
                        primary: this.listData[index].primary
                    }).then((res) => {
                        this.$Message.success('删除成功')
                        this.searchList()
                    }).catch((err) => {})
                }
            })
        },

        // 查询功能--展示详情-打开弹窗
        showDetailListItemWin (index) {
            queryExampleListItem({
                primary: this.listData[index].primary
            }).then((res) => {
                this.detailListItemWinFlag = true
                this.detailListItemForm = res
            }).catch((err) => {})
        },
        // 查询功能--展示详情-关闭弹窗
        hideDetailListItemWin () {
            this.detailListItemWinFlag = false
        },

    }
}
</script>

<style scoped lang="scss">
.view-ExampleList {
    min-height: 200px;
}
</style>
